import React, { Component, createRef } from 'react';
//  引入验证码组件
import Captcha from '../../components/Captcha';
// 引入对应的组件antd
import { Form, Input, Button, Space, message } from 'antd';
import { UserOutlined, LockOutlined, KeyOutlined } from '@ant-design/icons';
// 引入withRouter
import { withRouter } from 'react-router-dom'
// 导入url.js 接口地址
import url from '@/config/url'
// 导入封装好的axios请求
import req from '@/http/request.js'
class Normallogin extends Component {

    state = {
        key: ''
    }
    ref1 = createRef()  // 创建ref对象
    render() {
        return (
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={this.onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                        size='large'
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Space>
                        <Input
                            size='large'
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="验证码"
                        />
                        {/*验证码*/}
                        <Captcha saveKey={this.getData} ref={this.ref1} w='140px' h='40px'></Captcha>
                    </Space>
                </Form.Item>
                <Form.Item>
                    <Button size='large' type="primary" block htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        );
    }
    // 定义一个方法,参数接受来自子组件的数据
    getData = (key) => {
        this.setState({
            key: key
        })
    }
    // 点击提交
    onFinish = (values) => {
        // console.log(values);
        values.key = this.state.key
        req.post(url.pwdlogin, values).then(res => {
            // console.log(res);
            if (res.data.errNo === 0) {
                // 登录成功
                message.success('登录成功', 1);
                // 跳转到新页面
                // console.log(this);
                this.props.history.push('/dashboard')
            } else {
                // 登录失败
                message.error(res.data.errText, 1)
                // 刷新验证码
                this.ref1.current.loadCaptcha()
            }

        })
    };
}

export default withRouter(Normallogin);
